//
//  Transition_2.swift
//  NaiCha
//
//  Created by 唐安坤 on 2024/9/6.
//

import SwiftUI

struct Transition_2: View {
    
    @State var showType = 0
    var body: some View {
        VStack{
            HStack{
                Text("欢迎学习SwiftUI")
                    .font(.system(size: 20,weight: .bold))
                    .padding()
                Spacer()
            }
            
            HStack{
                switch showType{
                case 0:
                    RoundedRectangle(cornerSize: CGSize(width: 20, height: 20))
                        .foregroundColor(.orange).padding()
                        .frame(width: .infinity, height: 200, alignment: /*@START_MENU_TOKEN@*/.center/*@END_MENU_TOKEN@*/)
                        .overlay {
                        Text("第1课Transition使用")
                                .foregroundColor(.white)
                                .font(.system(size: 25,weight: .bold))
                                .padding()
                        }.transition(.asymmetric(insertion: .slide, removal: .opacity.combined(with: .scale(scale: 1.5))))
                case 1:
                    RoundedRectangle(cornerSize: CGSize(width: 20, height: 20))
                        .foregroundColor(.yellow).padding()
                        .frame(width: .infinity, height: 200, alignment: .center)
                        .overlay {
                        Text("第2课Transition使用")
                                .foregroundColor(.white)
                                .font(.system(size: 25,weight: .bold))
                                .padding()
                        }.transition(.asymmetric(insertion: .slide, removal: .opacity.combined(with: .scale(scale: 1.5))))
                case 2:
                    RoundedRectangle(cornerSize: CGSize(width: 20, height: 20))
                        .foregroundColor(.blue).padding()
                        .frame(width: .infinity, height: 200, alignment: /*@START_MENU_TOKEN@*/.center/*@END_MENU_TOKEN@*/)
                        .overlay {
                        Text("第3课Transition使用")
                                .foregroundColor(.white)
                                .font(.system(size: 25,weight: .bold))
                                .padding()
                        }.transition(.asymmetric(insertion: .slide, removal: .opacity.combined(with: .scale(scale: 1.5))))
                    
                default:
                    Text("")
                }
                
            }
            Spacer()
        }.onTapGesture {
            withAnimation {
                if showType == 2{
                    showType = 0
                }else{
                    showType += 1
                }
            }
            
        }
        
    }
}

#Preview {
    Transition_2()
}
